import React, {PropTypes} from 'react';
import {Row, Col, Button, Form, Input, Select} from 'antd';
import styles from './OrderSearch.css';
const FormItem = Form.Item;
const Option = Select.Option;

const OrderSearch = ({
  onSearch,
  handleChange,
  form: {
    getFieldDecorator,
    getFieldsValue,
    resetFields,
  },
}) => {
  // labelcol wrappercol间距大小
  const formItemLayout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 18,
    },
  };
  // 搜索
  function handleSubmit() {
    onSearch(getFieldsValue());
  }

  // 清除条件
  function handleReset(e) {
    e.preventDefault();
    resetFields();
  };

  return (
    <div className={styles.box}>
      <Form layout='horizontal' className="ant-advanced-search-form">
        <Row >
          <Col span={8}>
            <FormItem
              label="订单编号："
              {...formItemLayout}
            >
              {getFieldDecorator('orderId')(
                <Input placeholder="请选择" size="default"/>
              )}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem
              label="订单来源："
              {...formItemLayout}
            >
              {getFieldDecorator('orderFrom')(
                <Select
                  placeholder="请选择"
                  optionFilterProp="children"
                  onChange={handleChange}
                  filterOption={(input, option) =>
                  option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                >
                  <Option value="前台开单">前台开单</Option>
                  <Option value="口碑预约">口碑预约</Option>
                  <Option value="扫码选技师">扫码选技师</Option>
                  <Option value="前台预约">前台预约</Option>
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem
              label="订单状态："
              {...formItemLayout}
            >
              {getFieldDecorator('orderStatus')(
                <Input placeholder="请选择" size="default"/>
              )}
            </FormItem>
          </Col>

        </Row>

        <Row >
          <Col span={8}>
            <FormItem
              label="技师工号："
              {...formItemLayout}
            >
              {getFieldDecorator('techNo')(
                <Input placeholder="请输入" size="default"/>
              )}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem
              label="上钟状态："
              {...formItemLayout}
            >
              {getFieldDecorator('clockStatus')(
                <Select
                  placeholder="请选择"
                  optionFilterProp="children"
                  onChange={handleChange}
                  filterOption={(input, option) =>
                  option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                >
                  <Option value="全部上钟">全部上钟</Option>
                  <Option value="部分上钟">部分上钟</Option>
                  <Option value="全部下钟">全部下钟</Option>
                  <Option value="部分下种">部分下种</Option>
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem
              label="包间："
              {...formItemLayout}
            >
              {getFieldDecorator('room')(
                <Input placeholder="请选择" size="default"/>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row >
          <Col span={8} style={{textAlign: 'left'}}>
            <FormItem
              style={{textAlign: 'left'}}
              label="开单时间："
              {...formItemLayout}
            >
              {getFieldDecorator('billingTime')(
                <Input placeholder="请选择" size="default"/>
              )}
            </FormItem>
          </Col>
          <Col span={8} style={{textAlign: 'left'}}>
            <FormItem
              label="预约时间："
              {...formItemLayout}
            >
              {getFieldDecorator('orderTime')(
                <Input placeholder="请选择" size="default"/>
              )}
            </FormItem>
          </Col>
          <Col span={8}>
            <Button onClick={handleReset} className="fr">清除条件</Button>
            <Button onClick={handleSubmit} type="primary" className="fr" style={{marginRight: "16px"}}>搜索</Button>
          </Col>
        </Row>
      </Form>
    </div>
  );
};

OrderSearch.propTypes = {
  handleSubmitOk: PropTypes.func,
  handleReset: PropTypes.func,
};

export default Form.create()(OrderSearch);
